<template>
    <div class="academy03">

        <div class="title">
            <h1>教师管理{{chinese}} &gt; 数据分析 </h1>
        </div>
        <div class="Echart">

        </div>
        
    </div>
</template>
<script>
import * as echarts from 'echarts'
import {reactive,toRefs,ref,computed,onMounted} from "vue"
import {ajax} from "@/api"
export default {
    setup(props) {
        const charInit=(arr)=>{
            var myChart=echarts.init(document.querySelector('.Echart'))
            var option = {
                xAxis: {
                    type: 'category',
                    data: ['语文', '外语', '数学']
                },
                yAxis: {
                    type: 'value'
                },
                series: [
                    {
                    data: arr,
                    type: 'bar'
                    }
                ]
            };
            myChart.setOption(option)

        }
         const getList = async()=>{
            let res = await ajax.getList({tableName:"jiaoshis"})
            console.log(res.data);
            console.log(res.data.filter(v=>{return v.kemu==99}))
            const count1=res.data.filter(v=>{return v.kemu==99})
            state.chinese=count1.length
            state.count.push(state.chinese)
             const count2=res.data.filter(v=>{return v.kemu==97})
            state.engish=count2.length
            state.count.push(state.engish)
             const count3=res.data.filter(v=>{return v.kemu==79})
            state.chinese=count3.length
            state.count.push(state.chinese)
            console.log(state.count);
            let arr = Array.from(state.count)
            console.log(arr);
             charInit(arr)
         }
        
        onMounted(()=>{
            getList()
           
            
        })
         const state=reactive({
                math:null,
                engish:null,
                chinese:null,
                count:[],
         })
         return{
            ...toRefs(state),
         }
    }

}
</script>
<style lang="scss" scoped>

.academy03{
    .title{

    }
    .Echart{
        width: 100%;
        height: 500px;
    }
}
    
</style>